<template>
  <div ref="containerRef" class="common-page detail">
    <title-view title="在册信息" icon="item-register"></title-view>
    <div class="common-item-view">
      <t-row :gutter="[0, 16]">
        <t-col v-for="(item, index) in list" :key="index" :span="4">
          <div class="item">
            <div class="label" style="width: 100px">{{ item.label }}</div>
            <div class="value">{{ item.value }}</div>
          </div>
        </t-col>
      </t-row>
    </div>
    <title-view title="在册信息" icon="item-register"></title-view>
    <div class="common-item-view">
      <t-row :gutter="[0, 30]">
        <t-col v-for="(item, index) in list" :key="index" :span="4">
          <div class="item">
            <div class="label" style="width: 100px">{{ item.label }}</div>
            <div class="value">{{ item.value }}</div>
          </div>
        </t-col>
      </t-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import dayjs from 'dayjs';
import _ from 'lodash';
import { tryit } from 'radash';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';

import mockApi from '@/api/mock';
import { ResultItem } from '@/api/model/mockModel';
import { SUCCESS_CODE } from '@/constants';
import { useLoading } from '@/hooks/useLoading';
import { setKvViewData } from '@/utils';

import { INIT_FORM_LIST } from './datas/detail';

const route = useRoute();

const containerRef = ref<HTMLDivElement>();
const list = ref(_.cloneDeep(INIT_FORM_LIST));

const { loadingStart, loadingEnd } = useLoading(containerRef);

// 设置数据
const setData = (data: ResultItem) => {
  const changeData = {
    created_at: dayjs(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss'),
    updated_at: dayjs(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss'),
  };
  list.value = setKvViewData(list.value, { ...data, ...changeData });
};

const getData = async () => {
  loadingStart();
  const id = route.query.id as string;
  const [err, res] = await tryit(mockApi.info)({ id });
  if (!err && res.code === SUCCESS_CODE) setData(res.data);
  loadingEnd();
};

onMounted(() => {
  getData();
});
</script>

<style lang="less" scoped></style>
